<template>
  <div v-theme:columu="'arrow'" id="show-blogs">
      <h1>博客总览</h1>
      <input type="text" v-model="search" placeholder="搜索">
      <div v-for="blog in filteredBlogs" class="single-blog">
        <router-link v-bind:to="'/blog/'+blog.id ">
            <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
        </router-link>
        <article>{{blog.body | snippet}}</article>          
      </div>
  </div>
</template>

<script>
export default {
  name: 'show-blogs',
  data(){
      return{
          blogs:[],
          search:''
      }
  },
  created() {
      this.$http.get("./../static/posts.json")
      .then(function(data){
          // console.log(data);
        this.blogs=data.body.slice(0,10);
      })
  },
  computed: {
      filteredBlogs:function(){
          return this.blogs.filter((blog)=>{//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            return blog.title.match(this.search);//match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
          })
      }
  },
  filters:{
    "to-uppercase":function(value){
        return value.toUpperCase();
    },
    snippet(value){
        return value.slice(0,100)+"...";
    }
  },
  directives:{
    'rainbow':{
        bind(el,binding,vnode){
            el.style.color="#"+Math.random().toString(16).slice(2,8);
			/** el可以获取当前dom节点，并且进行编译，也可以操作事件 **/
            /** binding指的是一个对象，一般不用 **/
            /** vnode 是 Vue 编译生成的虚拟节点 **/
        }
    }
  }
}
</script>

<style>
#show-blogs{
    max-width: 800px;
    margin: 0 auto;
}

.single-blog{
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background: #eee;
    border: 1px dotted #aaa;
}

#show-blogs a{
    color: #444;
    text-decoration: none;
}

input[type="text"]{
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}
</style>
